import React            from 'react';

class ListSearch extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			//这是两个输入框的默认值
			searchType    : 'productId',//searchType是productId/productName
			searchKeyword : ''
		}
	}
	//当选择框内容改变
	onValueChange(e){
		let name  = e.target.name,
		    value = e.target.value.trim();
		this.setState({
			[name] : value
		});
	}
	
	//做搜索提交
	onSearch(e){
		this.props.onSearch(this.state.searchType,this.state.searchKeyword);
	}
	//输入关键字后按回车自动提交
	onSearchKeywordKeyup(e){
		if(e.keyCode == 13){
			this.onSearch();
		}
	}
	

     render(){
        return (
            <div className="row search-wrap" >
                <div className="col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control" name="searchType"
                            onChange={(e) => {this.onValueChange(e)}}>
                                <option value="productId">按商品id查询</option>
                                <option value="productName">按商品名称查询</option>
                            </select>
                        </div>
                        <div className="form-group">
                            <input type="text" className="form-control" name="searchKeyword"
                             placeholder="关键词" onChange={(e) => {this.onValueChange(e)}}
                             onKeyUp={(e) =>{this.onSearchKeywordKeyup(e)}}/>
                        </div>
                            <button className="btn btn-primary" onClick={(e) => {this.onSearch(e)}}>查询</button>
                    </div>
                </div>
            </div>
         );
     }
}


export default ListSearch;
